<template>
  <div class="table-settings">
    <RedoSetting
      v-if="getSetting.redo"
      :getPopupContainer="getTableContainer"
    />
    <SizeSetting
      v-if="getSetting.size"
      :getPopupContainer="getTableContainer"
    />
    <ColumnSetting
      v-if="getSetting.setting"
      @columns-change="handleColumnChange"
      :getPopupContainer="getTableContainer"
      :cache="getSetting.settingCache"
    />
    <FullScreenSetting
      v-if="getSetting.fullScreen"
      :getPopupContainer="getTableContainer"
    />
  </div>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";
import type { TableSetting, ColumnChangeParam } from "../../types/table";
import { computed, unref } from "vue";
import ColumnSetting from "./ColumnSetting.vue";
import SizeSetting from "./SizeSetting.vue";
import RedoSetting from "./RedoSetting.vue";
import FullScreenSetting from "./FullScreenSetting.vue";
import { useTableContext } from "../../hooks/useTableContext";

defineOptions({ name: "TableSetting" });

const props = defineProps({
  setting: {
    type: Object as PropType<TableSetting>,
    default: () => ({}),
  },
});

const emit = defineEmits(["columns-change"]);

const table = useTableContext();

const getSetting = computed((): TableSetting => {
  return {
    redo: true,
    size: true,
    setting: true,
    settingCache: false,
    fullScreen: false,
    ...props.setting,
  };
});

function handleColumnChange(data: ColumnChangeParam[]) {
  emit("columns-change", data);
}

function getTableContainer() {
  return table ? unref(table.wrapRef) : document.body;
}
</script>
<style lang="less">
.table-settings {
  & > * {
    margin-right: 12px;
  }

  svg {
    width: 1.3em;
    height: 1.3em;
  }
}
</style>
